<template>
    <div class="cart-wrapper">
      <!--有效商品-->
      <div class="cart-box">
        <!--v-for="(item, index) in cartItems" :key="index"-->
        <div class="product v-flex-row-start" >
          <!--选择-->
          <div class="check-box-icon">
            <div class="square" :class="{'checked':checked}" @click="isCheck()"></div>
          </div>
          <div class="product-item">
            <div class="tab-content v-flex-row-start">
              <div class="curriculum-img">
                <img src="http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg" alt="">
              </div>
              <div class="curriculum-introduce">
                <div>
                  <div class="curriculum-title">如何激励你的员工</div>
                  <div class="curriculum-sub-title">推动企业利润快速增长</div>
                  <div class="curriculum-sub-title">2626人学习</div>
                </div>
                <div class="curriculum-price v-flex-row-between">￥ 5000.00</div>
              </div>
            </div>
          </div>
        </div>
        <div class="product v-flex-row-start" >
          <!--选择-->
          <div class="check-box-icon">
            <div class="square" :class="{'checked':checked}" @click="isCheck()"></div>
          </div>
          <div class="product-item">
            <div class="tab-content v-flex-row-start">
              <div class="curriculum-img">
                <img src="http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg" alt="">
              </div>
              <div class="curriculum-introduce">
                <div>
                  <div class="curriculum-title">如何激励你的员工</div>
                  <div class="curriculum-sub-title">推动企业利润快速增长</div>
                  <div class="curriculum-sub-title">2626人学习</div>
                </div>
                <div class="curriculum-price v-flex-row-between">￥ 5000.00</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--是否全选，结算-->
      <div class="is-check-all v-flex-row-between">
        <div class="check-checkAll v-flex-row-between">
          <div class="all-icon-wrapper v-flex-row-between">
            <div class="square" :class="{'checked':checked}" @click="isCheck()"></div>
            <div class="is-check-text">全选</div>
          </div>
          <div class="checked-num">已选择 <span class="check-num-text">1</span> 件 </div>
        </div>
        <div class="total-money">共计：<span class="total-text">￥ 5000.00</span></div>
      </div>
      <!--立即付款-->
      <div class="buy-now" @click="toBuy">立即付款</div>
    </div>
</template>

<script>
  export default {
    name: "cart",
    data () {
      return {
        checked:false,
        cartItems:[]
      }
    },
    methods:{
      // 切换选择
      isCheck () {
        this.checked = !this.checked;
      },
      toBuy () { // 购买
        this.$router.push({
          path: '/pages/cart/placeOrder',
          query:{} // 带参
        })
      }
    }
  };
</script>

<style scoped lang="less">
  .square {
    width:20rpx;
    height:20rpx;
    border:1px solid #B3B4B5;
  }
  .checked {
    display:inline-block;
    width:20rpx;
    height:20rpx;
    // 背景图片用这个这样的 '/static/image/cart/checked.png'不显示，应该要用http://.........
    // background: url('/static/image/cart/checked.png') no-repeat center center;
    background-color:#2B80FF;
  }
  /*立即付款*/
  .buy-now {
    position:fixed;
    bottom:0;
    left:0;
    text-align:center;
    width:100%;
    height:98rpx;
    line-height:98rpx;
    background-color:#2B80FF;
    color:#fff;
    font-size:32rpx;
    font-weight:400;
  }

  // 购物车List
  .product {
    padding:0rpx 20rpx;
    display:flex;
    background-color:@bg_color;
    margin-bottom:24rpx;
  }
  .tab-content {
    padding:24rpx 20rpx;
    .curriculum-img {
      width: 300rpx;
      height:170rpx;
      & > img {
        width: 300rpx;
        height:170rpx;
        border-radius:10rpx;
      }
    }
  }
  .curriculum-introduce {
    padding:0px 10px;
    box-sizing:border-box;
  }
  .curriculum-title {
    color:#333;
    font-size:28rpx;
    font-weight:bold;
  }
  .curriculum-sub-title {
    color:#B3B4B5;
    font-size:@font_size_24;
  }
  .curriculum-price {
    color:#FF5050;
    font-size:32rpx;
  }
  .vip-price{
    color:#FFBA00;
  }
  // -----

  // 是否全选
  .is-check-all {
    padding:0rpx 20rpx ;
    background-color:@bg_color;
    width:100%;
    height:98rpx;
    position:fixed;
    left:0;
    bottom:98rpx;
  }
  .is-check-text {
    display:inline-block;
    padding-left:2px;
    color:#B3B4B5;
    font-size:24rpx;
  }
  .checked-num {
    padding-left:62rpx;
    color:#333;
    font-size:24rpx;
  }
  .total-text {
    color:#FF5050;
    font-size:32rpx;
    font-weight:bold;
  }
  .check-num-text {
    color:#FF5050;
  }
</style>
